<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Card, message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';

// 表单初始化
const [QueryForm] = useVbenForm({
  // 默认展开
  collapsed: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入店铺名称',
      },
      // 字段名
      fieldName: 'shopname',
      // 界面显示的label
      label: '店铺名称',
    },
    {
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入客户名称',
      },
      fieldName: 'customername',
      label: '客户名称',
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  // submitOnChange: true,
  submitButtonOptions: {
    content: '查询',
  },
  submitOnEnter: true,
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
});

// 表格初始化
interface RowType {
  createDate: string;
  customername: string;
  lsName: string;
  other: string;
  shopname: string;
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { editRender: { name: 'input' }, field: 'shopname', title: '店铺名称' },
    { editRender: { name: 'input' }, field: 'customername', title: '客户名称' },
    { editRender: { name: 'input' }, field: 'lsName', title: '揽收名称' },
    { editRender: { name: 'input' }, field: 'other', title: '其他' },
    { field: 'createDate', formatter: 'formatDateTime', title: '创建时间' },
    { slots: { default: 'action' }, title: '操作' },
  ],
  editConfig: {
    mode: 'row',
    trigger: 'click',
  },
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getExampleTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  showOverflow: true,
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

// 按钮控制区域
// 表单提交
function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}

// 是否可编辑
function hasEditStatus(row: RowType) {
  return gridApi.grid?.isEditByRow(row);
}

// 编辑行
function editRowEvent(row: RowType) {
  gridApi.grid?.setEditRow(row);
}

// 保存行
async function saveRowEvent(row: RowType) {
  await gridApi.grid?.clearEdit();

  gridApi.setLoading(true);
  setTimeout(() => {
    gridApi.setLoading(false);
    message.success({
      content: `保存成功！shopname=${row.shopname}`,
    });
  }, 600);
}

const cancelRowEvent = (_row: RowType) => {
  gridApi.grid?.clearEdit();
};
</script>

<template>
  <Page auto-content-height>
    <Card class="mb-5" title="">
      <QueryForm />
    </Card>

    <div>qweqwe</div>

    <Grid>
      <template #action="{ row }">
        <template v-if="hasEditStatus(row)">
          <Button type="link" @click="saveRowEvent(row)">保存</Button>
          &nbsp;
          <Button type="link" @click="cancelRowEvent(row)">取消</Button>
        </template>
        <template v-else>
          <Button type="link" @click="editRowEvent(row)">编辑</Button>
        </template>
      </template>
    </Grid>
  </Page>
</template>
